<script setup>
import { ref, reactive, onMounted } from 'vue'
import { User } from '@/api';
import { useUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';


// user 仓库
let user = useUserStore()

// 用户列表标签页
let user_tabs = ref([
    { label: '全部', name: '' },
    { label: '微信公众号', name: 'wechat' },
    { label: '微信小程序', name: 'routine' },
    { label: 'H5', name: 'h5' },
    { label: 'PC', name: 'pc' },
    { label: 'APP', name: 'app' }
])
// 标签活跃页
const activeName = ref('')
const handleClick_tab = (tab, event) => {
    formInline.value.user_type = tab.props.name
    // 获取用户列表
    load_user_list()
}
// 表格数据
let tableData = ref([]);
let count=ref(0);
let load_user_list = async () => {
    let { status, msg, data } = await User.user_list(formInline.value);
    tableData.value = data.list;
    count.value=data.count;
}
onMounted(() => {
    load_user_list()
    // 获取用户标签
    user.init_user_label()
    // 获取用户分组
    user.init_user_group()
    // 获取用户等级
    user.init_user_level()
})
// 搜索表单
const formInline = ref({
    now_money: '',
    data: '',
    user_type: '',
    field_key: '',
    nickname: '',
    label_id: '',
    pay_count: '',
    group_id: '',
    level: '',
    is_promoter: '',
    isMember: '',
    user_time_type: '',
    user_time: '',
    country: '',
    province: '',
    city: ''
})
// 搜索表单展开
let open_search_form = ref(false);

// 把日期转换为需要的格式
const handleClick_datePicker = (value) => {
    formInline.value.user_time = value.toString().replace(',', '-')
}
// 搜索相关用户
const handle_search_user = () => {
    load_user_list(formInline.value)
}
// 搜索大表单
let select_ref_form = ref(null)
// 重置大表单
const resetForm = () => {
    formInline.value = {
        now_money: '',
        data: '',
        user_type: '',
        field_key: '',
        nickname: '',
        label_id: '',
        pay_count: '',
        group_id: '',
        level: '',
        is_promoter: '',
        isMember: '',
        user_time_type: '',
        user_time: '',
        country: '',
        province: '',
        city: ''
    };
    load_user_list();
}
// 控制添加用户的抽屉弹窗
let is_show_addUser_drawer = ref(false)
// 打开添加用户弹窗 - 并且加载 添加用户表单
const show_addUser_drawer = () => {
    is_show_addUser_drawer.value = true
    // 获取添加用户表单
    init_addUserForm()
}
let add_user_form = ref([])
// 获取添加用户表单函数
const init_addUserForm = async () => {
    let { status, msg, data } = await User.create()
    if (status) {
        ElMessage.success(msg)
        console.log(data)
        add_user_form.value = data.rules
    }
}
// 添加用户
let addUser_formRef = ref(null)
const cancel_addUser = () => {
    is_show_addUser_drawer.value = false
    addUser_formRef.value.resetFields() // 重置表单
}
const handle_add_user = async () => {
    let data = {}
    add_user_form.value.map((item) => {
        data[item.field] = item.value
    })
    let { status, msg } = await User.add_user(data)
    if (status) {
        load_user_list();
        ElMessage.success(msg);
        cancel_addUser();
    }
}


// 选中的table数据项的id数组
let checked_tableItem_id = ref([])
// 改变选择表格某一项时 -- 包含CheckBoxItem，CheckBoxAll
const handleChangeCheckBox = (selection) => {
    if (selection.length !== 0) {
        selection.map((item, index) => {
            checked_tableItem_id.value.push(item.uid)
        })
    } else {
        checked_tableItem_id.value = []
    }
}
// 用户分组
let dialogGroupVisible = ref(false)
let checked_group_id = ref()
// 批量设置用户分组
const set_user_group = (id) => {
    if (id) {
        console.log(id);
        uid_label.value = id;
        dialogGroupVisible.value = true
        return
    }
    if (checked_tableItem_id.value.length === 0) {
        ElMessage({
            message: '请选择要设置分组的用户',
            type: 'warning',
            duration: 5000,
        })
    } else {
        dialogGroupVisible.value = true
    }
}
// 保存用户分组
const handle_save_user_group = async () => {
    let data = {}
    let checked_tableItem_id_string = checked_tableItem_id.value.toString()
    data.group_id = checked_group_id.value
    if (uid_label.value === '') {
        data.uids = checked_tableItem_id_string
    } else {
        data.uids = uid_label.value;
    }
    data.all = '0|1'
    data.where = ''
    let { status, msg } = await User.save_user_group(data)
    if (status) {
        ElMessage.success(msg)
    }
    dialogGroupVisible.value = false
    uid_label.value = ''
    load_user_list()
}

let uid_label = ref('');

// 关联用户标签 标志，与设置用户标签区分 -- 因为他们公用一个弹窗
let dialogTagsVisible = ref(false)
let relate_userLabel_flag = ref(false)
// 选择用户标签
let checkTagsGroup = ref([])
const handle_relate_userLabel = () => {
    dialogTagsVisible.value = true
    relate_userLabel_flag.value = true
}
// 批量设置用户标签
const set_user_label = (id) => {
    if (id) {
        console.log(id);
        uid_label.value = id;
        dialogTagsVisible.value = true
        return
    }
    if (checked_tableItem_id.value.length === 0) {
        ElMessage({
            message: '请选择要设置标签的用户',
            type: 'warning',
            duration: 5000,
        })
    } else {
        dialogTagsVisible.value = true
    }


}
// 保存用户标签
const handle_save_user_label = async () => {
    if (relate_userLabel_flag.value) {
        let checkedTagsGroup_string = checkTagsGroup.value.toString()
        formInline.value.label_id = checkedTagsGroup_string
        relate_userLabel_flag.value = false
        dialogTagsVisible.value = false
        ElMessage.success('选择成功!')
        return
    }
    let data = {}
    let checkedTagsGroup_string = checkTagsGroup.value.toString()
    let checked_tableItem_id_string = checked_tableItem_id.value.toString()
    if (uid_label.value === '') {
        data.uids = checked_tableItem_id_string
    } else {
        data.uids = uid_label.value;
    }

    data.label_id = checkedTagsGroup_string
    data.all = '0|1'
    data.where = ''
    let { status, msg } = await User.save_user_label(data)
    if (status) {
        ElMessage.success(msg)
    }
    dialogTagsVisible.value = false
    uid_label.value = '';
    checkTagsGroup.value = []
    load_user_list()
}

// 用户详情
// 控制用户详情的抽屉弹窗
let is_show_userinfo_drawer = ref(false)

// 存储用户详情
let user_info = ref()
// 获取用户详情
const get_userInfo = async (id) => {
    let { status, msg, data } = await User.user_info(id)
    if (status) {
        console.log(data)
        user_info.value = data
        is_show_userinfo_drawer.value = true
    }
}

// 用户详情标签页活跃页
let userInfo_activeName = ref('')
// 用户详情标签页
let userInfo_tabs = ref([
    { label: '用户信息', name: '' },
    { label: '消费记录', name: 'order' },
    { label: '积分明细', name: 'integral' },
    { label: '签到记录', name: 'sign' },
    { label: '持有优惠券', name: 'coupon' },
    { label: '余额变动', name: 'balance_change' },
    { label: '好友关系', name: 'spread' },
])
// 用户详情页的 其他信息 数据表格 -- 各个标签页下
let user_otherInfo_tableData = ref([
    {
        type: 'order',
        props: [
            { value: 'order_id', label: '订单号' },
            { value: 'name', label: '收货人' },
            { value: 'goods_count', label: '商品数量' },
            { value: 'money', label: '实付金额' },
            { value: 'trad_time', label: '交易完成时间' },
        ]
    },
    {
        type: 'integral',
        props: [
            { value: 'source', label: '来源/用途' },
            { value: 'variation', label: '积分变化' },
            { value: 'after_change', label: '变化后积分' },
            { value: 'date', label: '日期' },
            { value: 'mark', label: '备注' },
        ]
    },
    {
        type: 'sign',
        props: [
            { value: 'order_id', label: '订单号' },
            { value: 'name', label: '收货人' },
            { value: 'goods_count', label: '商品数量' },
            { value: 'money', label: '实付金额' },
            { value: 'trad_time', label: '交易完成时间' },
        ]
    },
    {
        type: 'coupon',
        props: [
            { value: 'source', label: '来源/用途' },
            { value: 'variation', label: '积分变化' },
            { value: 'after_change', label: '变化后积分' },
            { value: 'date', label: '日期' },
            { value: 'mark', label: '备注' },
        ]
    },
    {
        type: 'balance_change',
        props: [
            { value: 'order_id', label: '订单号' },
            { value: 'name', label: '收货人' },
            { value: 'goods_count', label: '商品数量' },
            { value: 'money', label: '实付金额' },
            { value: 'trad_time', label: '交易完成时间' },
        ]
    },
    {
        type: 'spread',
        props: [
            { value: 'source', label: '来源/用途' },
            { value: 'variation', label: '积分变化' },
            { value: 'after_change', label: '变化后积分' },
            { value: 'date', label: '日期' },
            { value: 'mark', label: '备注' },
        ]
    },
])
// 切换用户详情标签页
const handleClick_userInfo_tab = (tab, event) => {
    load_user_one_info(tab.props.name)
}
let user_info_form = ref({})
const load_user_one_info = async (name) => {
    let { status, msg, data } = await User.one_info(user_info.value.uid, { type: name });
    if (name) {
        user_info_form.value = JSON.parse(JSON.stringify(user_otherInfo_tableData.value.filter((item) => {
            if (item.type === name) {
                return item;
            }
        })[0]));
    }
}

// 编辑用户详情--是否开启
let is_edit_one_info = ref(false);
let edit_other_form = ref([])
// 编辑其他
let user_id = ref(0)
let is_edit_other = ref(false)
let set_user_edit_other = async (id) => {
    user_id.value = id
    is_edit_other.value = true
    let { status, msg, data } = await User.edit_other(id)
    console.log(status, msg, data);
    edit_other_form.value = data;
}
// 保存编辑其他
let handle_edit_other = async () => {
    is_edit_other.value = false
    let { status, msg, data } = await User.update_other(user_id.value, edit_other_form.rules)
    console.log(status, msg, data);
    ElMessage.success(msg)
}
// 赠送会员时长
let is_level_time = ref(false)
let level_time_form = ref([])
let set_user_level_time = async (id) => {
    user_id.value = id
    let { status, msg, data } = await User.give_level_time(id)
    console.log(status, msg, data, id);
    data.rules.map((item) => {
        if (item.type === 'inputNumber') {
            item.value = parseInt(item.value)
        }
    })
    level_time_form.value = data
    is_level_time.value = true
}
let handle_save_give_level_time = async () => {
    let { status, msg, data } = await User.save_give_level_time(user_id.value, { days: level_time_form.value.rules[2].value })
    if (status) {
        ElMessage.success(msg)
        is_level_time.value = false
    }
}
</script>

<template>
    <el-card class="box-card">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick_tab">
            <el-tab-pane v-for="(item) in user_tabs" :label="item.label" :name="item.name">
                <!-- 搜索 -->
                <el-form :model="formInline" ref="select_ref_form" :inline="true" class="demo-form-inline">
                    <el-form-item class="item-search-input" label="用户搜索">
                        <div>
                            <el-input v-model="formInline.nickname" placeholder="请输入用户" class="input-with-select" clearable>
                                <template #prepend>
                                    <el-select v-model="formInline.field_key" clearable placeholder="请选择" style="width: 100px"
                                        :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                                        <el-option label="全部" value="" />
                                        <el-option label="手机号" value="phone" />
                                        <el-option label="UID" value="uid" />
                                        <el-option label="用户昵称" value="nickname" />
                                    </el-select>
                                </template>
                            </el-input>
                        </div>
                    </el-form-item>
                    <div v-show="open_search_form" class="select_form_body">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="用户标签" prop="label_id">
                                    <el-input v-model="formInline.label_id" @click="handle_relate_userLabel" readonly
                                        class="w-50 m-2" placeholder="请选择用户标签" clearable />
                                </el-form-item>
                            </el-col>
                            <el-form-item label="下单次数" prop="pay_count">
                                <el-select v-model="formInline.pay_count" placeholder="请选择下单次数" clearable>
                                    <el-option label="全部" value="" />
                                    <el-option label="0次" :value="0" />
                                    <el-option label="1次以上" :value="1" />
                                    <el-option label="2次以上" :value="2" />
                                    <el-option label="3次以上" :value="3" />
                                    <el-option label="4次以上" :value="4" />
                                    <el-option label="5次以上" :value="5" />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="用户分组" prop="group_id">
                                    <el-select v-model="formInline.group_id" placeholder="请选择用户分组" clearable>
                                        <el-option label="全部" value="" />
                                        <el-option v-for="(item, index) in user.user_group.list" :label="item.group_name"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-form-item label="用户等级" prop="level">
                                <el-select v-model="formInline.level" placeholder="请选择用户等级" clearable>
                                    <el-option label="全部" value="" />
                                    <el-option v-for="(item, index) in user.user_level.list" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="身份情况" prop="is_promoter">
                                    <el-radio-group v-model="formInline.is_promoter" size="small" clearable>
                                        <el-radio-button label="">全部</el-radio-button>
                                        <el-radio-button :label="1">推广员</el-radio-button>
                                        <el-radio-button :label="0">普通用户</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-form-item label="付费会员" prop="isMember">
                                <el-radio-group v-model="formInline.isMember" size="small" clearable>
                                    <el-radio-button label="">全部</el-radio-button>
                                    <el-radio-button :label="1">是</el-radio-button>
                                    <el-radio-button :label="0">否</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="访问情况" prop="user_time_type">
                                    <el-select v-model="formInline.user_time_type" placeholder="请选择访问情况" clearable>
                                        <el-option label="全部" value="" />
                                        <el-option label="时间段未访问" value="visitno" />
                                        <el-option label="时间段访问过" value="visit" />
                                        <el-option label="首次访问" value="add_time" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" v-show="formInline.user_time_type ? true : false">
                                <el-form-item label="访问时间" prop="user_time">
                                    <div class="block">
                                        <el-date-picker v-model="formInline.user_time" @click="handleClick_datePicker"
                                            type="daterange" format="YYYY/MM/DD" value-format="YYYY/MM/DD"
                                            range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" clearable />
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="地区情况" prop="country">
                                    <el-select v-model="formInline.country" placeholder="请选择国家" clearable>
                                        <el-option label="中国" value="domestic" />
                                        <el-option label="外国" value="abroad" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" v-show="formInline.country === 'domestic' ? true : false">
                                <el-form-item label="详细地址">
                                    <el-cascader placeholder="请选择地址" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <el-form-item :class="{ 'search-btn': open_search_form }">
                        <el-button @click="handle_search_user" type="primary"><el-icon>
                                <Search></Search>
                            </el-icon><span>搜索</span></el-button>
                        <el-button @click="resetForm">重置搜索数据</el-button>
                        <el-text @click="open_search_form = !open_search_form" type="primary"
                            style="margin: 0 10px;cursor: pointer;">
                            <span>
                                {{ open_search_form ? '收起' : '展开' }}
                                <el-icon v-show="!open_search_form">
                                    <ArrowDown />
                                </el-icon>
                                <el-icon v-show="open_search_form">
                                    <ArrowUp />
                                </el-icon>
                            </span>
                        </el-text>
                    </el-form-item>
                </el-form>

                <!-- 分割线 -->
                <el-divider content-position="left" border-style="dashed"></el-divider>
                <!-- 表格、操作 -->
                <el-row class="button_group">
                    <el-button @click="show_addUser_drawer" type="primary">添加用户</el-button>
                    <el-button>发送优惠券</el-button>
                    <el-button @click="set_user_group()">批量设置分组</el-button>
                    <el-button @click="set_user_label()">批量设置标签</el-button>
                    <el-button>
                        导出
                        
                    </el-button>
                </el-row>
                <el-table :data="tableData" @selection-change="handleChangeCheckBox" style="width: 100% ;margin-top: 30px;" border :header-cell-style="{backgroundColor:'#ececec'}">
                    <el-table-column type="expand">
                        <template #default="props">
                            <el-row :gutter="20" class="expand_row">
                                <el-col :span="6">
                                    <div m="4">
                                        <p m="t-0 b-2">首次访问: </p>
                                        <p m="t-0 b-2">标签:{{ props.row.labels }}</p>
                                        <p m="t-0 b-2">备注:{{ props.row.mark }}</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div m="4">
                                        <p m="t-0 b-2">近次访问: </p>
                                        <p m="t-0 b-2">生日:{{ props.row.birthday }}</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div m="4">
                                        <p m="t-0 b-2">身份证号: </p>
                                        <p m="t-0 b-2">推荐人:{{ props.row.spread_uid_nickname }}</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div m="4">
                                        <p m="t-0 b-2">真实姓名:{{ props.row.real_name }} </p>
                                        <p m="t-0 b-2">地址:{{ props.row.addres }}</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column type="selection" />
                    <el-table-column prop="uid" label="用户ID" />
                    <el-table-column prop="avatar" label="头像">
                        <template #default="scoped"><el-avatar :src="scoped.row.avatar" /></template>
                    </el-table-column>
                    <el-table-column prop="real_name" label="姓名" />
                    <el-table-column prop="isMember" label="付费会员">
                        <template #default="scoped">
                            <span>
                                {{ scoped.row.isMember ? '是' : '否' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="用户等级" />
                    <el-table-column prop="group_id" label="分组" />
                    <el-table-column prop="phone" label="手机号" />
                    <el-table-column prop="user_type" label="用户类型" />
                    <el-table-column prop="now_money" label="余额" />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scoped">
                            <el-button @click="get_userInfo(scoped.row.uid)" link type="primary" size="small">详情</el-button>
                            <el-divider direction="vertical" />
                            <el-dropdown
                                :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                                <span class="el-dropdown-link">
                                    更多
                                    <el-icon class="el-icon--right" color="#2d8cf0">
                                        <arrow-down />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="set_user_edit_other(scoped.row.uid)">
                                            积分余额</el-dropdown-item>
                                        <el-dropdown-item @click="set_user_level_time(scoped.row.uid)">
                                            赠送会员</el-dropdown-item>
                                        <el-dropdown-item @click="set_user_group(scoped.row.uid)">设置分组</el-dropdown-item>
                                        <el-dropdown-item @click="set_user_label(scoped.row.uid)">设置标签</el-dropdown-item>
                                        <el-dropdown-item>修改上级推广人</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="margin-top: 20px;" justify="end" align="middle">
                    <span style="margin-right: 10px;">共 {{ count }} 条</span>
                    <el-pagination background layout="prev, pager, next,jumper" :total="10" />
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <!-- 设置用户标签弹窗 -->
        <el-dialog v-model="dialogTagsVisible" title="请选择用户标签">
            <div v-for="(item, index) in user.user_label">
                <div>
                    {{ item.name }}
                </div>
                <el-checkbox-group v-model="checkTagsGroup">
                    <el-checkbox-button v-for=" tag  in  item.label " :key="tag.id" :label="tag.label_name"
                        style="margin: 20px 10px;border: 1px solid #ccc;">{{ tag.label_name }}</el-checkbox-button>
                </el-checkbox-group>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogTagsVisible = false">取消</el-button>
                    <el-button type="primary" @click="handle_save_user_label">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 添加用户 -->
        <el-drawer v-model="is_show_addUser_drawer">
            <template #header>
                <h4>用户信息填写</h4>
            </template>
            <template #default>
                <el-form :model="add_user_form" ref="addUser_formRef" label-position="right" label-width="100px"
                    style="max-width: 460px">
                    <el-form-item v-for="(item, index) in add_user_form" :label="item.title">
                        <el-input v-if="item.type === 'input'" v-model="item.value" :type="item.props.type"
                            :placeholder="item.props.placeholder" clearable />
                        <el-date-picker v-if="item.type === 'datePicker'" v-model="item.value" :type="item.props.type"
                            :placeholder="item.props.placeholder" size="default" clearable />
                        <el-select v-if="item.type === 'select' && item.title !== '用户标签'" v-model="item.value"
                            :placeholder="item.props.placeholder" clearable>
                            <el-option v-for="child in item.options" :label="child.label" :value="child.value" />
                        </el-select>
                        <el-input v-if="item.type === 'select' && item.title === '用户标签'" v-model="formInline.label_id"
                            @click="handle_relate_userLabel" readonly class="w-50 m-2" placeholder="请选择用户标签" clearable />
                        <el-radio-group v-if="item.type === 'radio'" v-model="item.value" class="ml-4">
                            <el-radio v-for="child in item.options" :label="child.label" :value="child.value"
                                size="large"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancel_addUser">取消</el-button>
                    <el-button @click="handle_add_user" type="primary">提交</el-button>
                </div>
            </template>
        </el-drawer>
        <!-- 设置用户分组弹窗 -->
        <el-dialog v-model="dialogGroupVisible" title="请选择用户分组">
            <el-select v-model="checked_group_id" placeholder="请选择用户分组" clearable>
                <el-option v-for="(item, index) in user.user_group.list" :label="item.group_name" :value="item.id" />
            </el-select>
            <template #footer>
                <el-button @click="handle_save_user_group" type="primary">
                    提交
                </el-button>
            </template>
        </el-dialog>
        <!-- 用户详情 -->
        <el-drawer size="60%" v-model="is_show_userinfo_drawer" :with-header="false">

            <template #default>
                <h4>用户详情</h4>
                <el-divider />
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div m="4">
                            <el-avatar shape="square" :size="60" :src="user_info.ps_info.avatar" />
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <el-row style="display: flex; justify-content: space-between;">
                            <span>{{ user_info.ps_info.real_name }}</span>
                            <div m="4" v-show="!is_edit_one_info">
                                <el-button @click="is_edit_one_info = true" type="primary">编辑</el-button>
                            </div>
                            <div m="4" v-show="is_edit_one_info">
                                <el-button @click="is_edit_one_info = false">取消</el-button>
                                <el-button type="primary">保存</el-button>
                            </div>
                        </el-row>
                        <el-descriptions>
                            <el-descriptions-item width="200px" v-for="(item) in user_info.headerList"
                                :label="item.title">{{ item.value }}</el-descriptions-item>
                        </el-descriptions>

                    </el-col>
                </el-row>
                <el-tabs v-model="userInfo_activeName" class="demo-tabs" @tab-click="handleClick_userInfo_tab">
                    <el-tab-pane v-for="(item) in userInfo_tabs" :label="item.label" :name="item.name">
                        <el-descriptions v-if="item.name === ''" title="User Info">
                            <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
                            <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
                            <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                            <el-descriptions-item label="Remarks">
                                <el-tag size="small">School</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="Address">No.1188</el-descriptions-item>
                            <el-descriptions-item label="Address">No.1188</el-descriptions-item>
                        </el-descriptions>
                        <div v-if="item.name !== ''">
                            <el-table :data="user_info_form.props" style="width: 100%">
                                <el-table-column v-for="item in user_info_form.props" :prop="item.value"
                                    :label="item.label" />
                            </el-table>
                            <div class="group_list_pagination">
                                <span>共0条</span>
                                <el-pagination background layout="prev, pager, next,jumper" :total="10" />
                            </div>
                        </div>

                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-drawer>
        <!-- 编辑其他 -->
        <el-dialog v-model="is_edit_other" title="修改其他">
            <el-form :model="edit_other_form.rules">
                <el-form-item v-for="item in edit_other_form.rules" :label="item.title" :value="item.value">
                    <el-radio-group v-if="item.type === 'radio'" v-model="item.value">
                        <el-radio v-for="option in item.options" :label="option.value" :value="option.value">{{ option.label
                        }}</el-radio>
                    </el-radio-group>
                    <el-input-number v-if="item.type === 'inputNumber'" :min="item.props.min" :max="item.props.max"
                        :label="item.value" :value="item.value" size="small" controls-position="right" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handle_edit_other"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 赠送会员 -->
        <el-dialog v-model="is_level_time" :title="level_time_form.title">
            <el-form :model="level_time_form.rules">
                <el-form-item v-for="item in level_time_form.rules" :label="item.title" :value="item.value"
                    v-model="item.value">
                    <el-input v-if="item.type === 'input'" v-model="item.value" readonly
                        :placeholder="item.props.placeholder" />

                    <el-input-number v-if="item.type === 'inputNumber'" :min="item.props.min" :max="item.props.max"
                        :label="item.title" :value="item.value" v-model="item.value" :placeholder="item.props.placeholder"
                        size="small" controls-position="right" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handle_save_give_level_time"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="less" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
.search-btn {
    margin-left: 400px;
}
</style>